<script setup lang="ts">
import { useRoute } from 'vue-router'
import SButtonList from '@/components/SButtonList.vue'
import { useList } from '@/composables/list-composable'
import type { Page } from '@/type/User'
import type { ResultData } from '@/api/service'
import type { MenuFilter, MenuVo, RouteMenu } from '@/type/Menu'
import { menuListApi } from '@/api/menu'
import { ElTable } from 'element-plus'
import { ref } from 'vue'
import router from '@/router'

const route = useRoute()

const rowButton = route.meta.rowButton
const topButton = route.meta.topButton

const routeButton = route.meta.routeButton

const filterForm = ref<MenuFilter>({
  createBy: null,
  exportCol: null,
  gmtCreateEnd: null,
  gmtCreateStart: null,
  isFrame: null,
  menuName: null,
  menuType: null,
  parentId: null,
  modifyBy: null,
  orderBy: null,
  perms: null,
  status: null,
  visible: null
})

const methods = {
  add: () => {
    router.push({ path: '/menu/info' })
  },
  edit: (row: MenuVo) => {
    router.push({ path: '/menu/info' , query: { menuId: row.menuId } })
  }
}

const { tableData, currentChange, page, size, pageChange, total, getData } = useList<RouteMenu>(
  () => {
    menuListApi(size.value, page.value, filterForm.value).then(
      (response: ResultData<Page<RouteMenu[]>>) => {
        tableData.value = response.data.modelList
      }
    )
  }
)

</script>

<template>
  <s-button-list :link="false" :row-data="null" :methods="methods" :button-list="topButton" />
  <el-form :inline="true" class="demo-form-inline s-table">
    <el-form-item label="菜单名称">
      <el-input placeholder="menuName" v-model="filterForm.menuName" clearable />
    </el-form-item>
    <el-form-item label="菜单权限">
      <el-input placeholder="perms" v-model="filterForm.perms" clearable />
    </el-form-item>
    <el-form-item label="菜单类型">
      <el-select v-model="filterForm.menuType" placeholder="menuType" style="width: 120px" clearable>
        <el-option label="目录" value="M" />
        <el-option label="菜单" value="C" />
        <el-option label="按钮" value="F" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="filterForm.status" placeholder="status" style="width: 120px" clearable>
        <el-option label="正常" :value="0" />
        <el-option label="停用" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="是否隐藏">
      <el-select v-model="filterForm.visible" placeholder="status" style="width: 120px" clearable>
        <el-option label="显示" :value="0" />
        <el-option label="隐藏" :value="1" />
      </el-select>
    </el-form-item>
  </el-form>

  <el-table
    border
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    row-key="menuId"
    @current-change="currentChange"
  >
    <el-table-column property="content.menuId" width="340" label="菜单编号" />
    <el-table-column property="content.menuName" label="菜单名称" width="120" />
    <el-table-column property="content.menuType" label="类型" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.content.menuType === 'M'" type="primary">目录</el-tag>
        <el-tag v-else-if="scope.row.content.menuType === 'C'" type="info">菜单</el-tag>
        <el-tag v-else type="warning">按钮</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="content.visible" label="显示" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.content.visible === 0" type="">显示</el-tag>
        <el-tag v-else type="info">隐藏</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="content.status" label="状态" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.content.status === 0" type="success">正常</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
    </el-table-column>
    <el-table-column property="content.perms" label="权限标识" />
    <el-table-column label="操作" width="220">
      <template #default="scope">
        <s-button-list link :methods="methods" :row-data="scope.row" :button-list="rowButton" />
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    class="s-table"
    background
    layout="prev, pager, next"
    :page-size="size"
    :total="total"
    @current-change="pageChange"
  />
</template>

<style scoped></style>